<template>
  <div class="flight-list">
    <div class="flight-list-head">
      <span id="hb">航班</span><span id="zt">状态</span
      ><span id="sfd">始发地</span><span id="jh">计划到达</span
      ><span id="sj">实际到达</span><span id="hzl">航站楼</span
      ><span id="djk">登机口</span>
      <!-- <decoration></decoration> -->
    </div>
    <el-scrollbar height="190px" noresize="true">
      <ul class="list-container-vertical">
        <li
          class="flight-list-items"
          v-for="(items, index) in flightList"
          :key="index"
        >
          <ul class="list-container-horizontal">
            <li class="inline-item" v-for="(item, index) in items" :key="index">
              {{ item }}
            </li>
          </ul>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import axios from 'axios';
import Decoration from '@/components/Common/Decoration.vue';
export default defineComponent({
  name: 'FlightList',
  components: { Decoration },
  setup(props, context) {
    const flightList = [
      {
        flightId: 'MU5110',
        status: 'true',
        arrivalCity: '上海虹桥机场',
        timePlan: '12:00',
        timeActual: '12:13',
        terminal: 'T2',
        gate: '63',
      },
      {
        flightId: 'MU5111',
        status: 'true',
        destination: '上海虹桥机场',
        timePlan: '12:00',
        timeActual: '12:13',
        terminal: 'T2',
        gate: '63',
      },
      {
        flightId: 'MU5111',
        status: 'true',
        destination: '上海虹桥机场',
        timePlan: '12:00',
        timeActual: '12:13',
        terminal: 'T2',
        gate: '63',
      },
      {
        flightId: 'MU5111',
        status: 'true',
        destination: '上海虹桥机场',
        timePlan: '12:00',
        timeActual: '12:13',
        terminal: 'T2',
        gate: '63',
      },
    ];
    return {
      flightList,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
:deep(.el-scrollbar) {
  width: 750px;
}
.flight-list {
  width: 750px;
  padding: 0;
  margin-left: -15px;

  .flight-list-head {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid $borderColor;
    background-color: lighten($themeColor, 5%);
    span {
      box-sizing: border-box;
      margin: 0;
      padding: 4px 10px;
      color: white;
      border-radius: 7px;
      &:hover {
        background: lighten($themeColor, 10%);
        cursor: default;
      }
      &#hb {
        margin-left: 58px;
      }
      &#zt {
        margin-left: 47px;
      }
      &#sfd {
        margin-left: 58px;
      }
      &#jh {
        margin-left: 46px;
      }
      &#sj {
        margin-left: 10px;
      }
      &#hzl {
        margin-left: 10px;
      }
      &#djk {
        margin-left: 5px;
      }
    }
  }
  .list-container-vertical {
    .flight-list-items {
      border-radius: 16px;
      box-shadow: 3px 3px 3px rgb(197, 209, 214), -5px -5px 5px #f9f9f9;
      list-style: none;
      line-height: 20px;
      margin-left: 5px;
      height: 40px;
      width: 700px;
      padding: 10px 20px;
      margin-bottom: 10px;
      line-height: 40px;
      .list-container-horizontal {
        .inline-item {
          display: inline;
          margin: 0 27px;
          color: $textColorGrey;
        }
      }
    }
  }

  .list-container {
    &-vertical {
      margin-left: 0;
      padding: 0;
    }
    &-horizontal {
      margin-left: 0;
      padding: 0;
    }
  }
}
:deep(.deco) {
  width: 40px;
  float: right;
  margin-left: -2px;
}
</style>
